<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/jsp/includeTop.jsp" %>

<style type="text/css">
    .map-hidden {display: none;}
    .map-show {
        width: 90%;
        height: 90%;
        position: absolute;
        z-index: 900;
    }
    .map-mask-hidden {display: none}
    .map-mask-show {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #606060;
        z-index: 800;
    }
</style>

<div style="display: none;">
    <form:form target="tempFrame" commandName="channelInfoForm" id="updateChannelInfoForm">
        <input type="hidden" id="updateType" name="updateType">
        <input type="hidden" id="userStepResultId" name="userStepResultId">
        <input type="hidden" id="latitude" name="latitude">
        <input type="hidden" id="longitude" name="longitude">
    </form:form>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="5">
  <tr>
    <td valign="top">
      <table class="dbborder" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td valign="bottom" class="blueTableBg">&nbsp;配置管理&nbsp;-&nbsp;门店地图数据维护</td>
        </tr>
        <%@ include file="/WEB-INF/jsp/admin/storeMapSearch.jsp" %>

		<tr>
		  <td>
              <div id="storeMapListData" class="pageDiv"/>
		  </td>
		</tr>
      </table>
    </td>
  </tr>
</table>
<div id="mapMask" class="map-mask-hidden"></div>
<div id="mapView" class="map-hidden">
    <div style="color: #d3d3d3;">拖动或右键点击改变位置</div>
    <div style="width:90%; color: #d3d3d3; padding-bottom: 8px">
        东经：<span id="lng"></span>, 北纬：<span id="lat"></span>
        <input type="button" id="closeButton" class="btnStyle" value="取消" style="float:right;" onclick="javascript:hideStoreMap();">
        <input type="button" id="obsoleteButton" class="btnStyle" value="作废" style="float:right;" onclick="javascript:doObsolete();">
        <input type="button" id="updateButton" class="btnStyle" value="更新" style="float:right;" onclick="javascript:doUpdate();">
    </div>
    <div id="mapContainer" style="width:90%;height:85%"></div>
</div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script type="text/javascript">
    listDefaultPageAjax('storeMapListData','channelInfoForm','<c:url value="/admin/storeMapListData.html" />');

    function showStoreMap(userStepResultId, lat, lng, currentLatitude, currentLongitude) {
        $('#mapMask').removeClass('map-mask-hidden').addClass('map-mask-show');
        var mapView = $('#mapView');
        mapView.removeClass('map-hidden').addClass('map-show');
        mapView.css('left', (.06 * mapView.width())).css('top', (.06 * mapView.height()));

        document.getElementById("userStepResultId").value = userStepResultId;
        var map = new BMap.Map("mapContainer");

        var currentPoint;
        if (currentLatitude && currentLongitude) {
            currentPoint = new BMap.Point(currentLongitude, currentLatitude);
            var icon = new BMap.Icon('<c:url value="/images/marker_blue.png"/>', new BMap.Size(21, 30), {anchor:new BMap.Size(10, 30)});


            <%--var storeOpenedMarkerImg = "<c:url value='/images/marker-storeopened.png' />";--%>
            <%--var storeOpenedIcon = new BMap.Icon(storeOpenedMarkerImg, new BMap.Size(20, 30));--%>

            var currentMarker = new BMap.Marker(currentPoint, {icon:icon});
            map.addOverlay(currentMarker);
        }

        var point = new BMap.Point(lng, lat);
        map.centerAndZoom(point, 18);

        $('#lat').html(lat);
        $('#lng').html(lng);

//        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
        map.addControl(new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
        var opts = {anchor: BMAP_ANCHOR_BOTTOM_LEFT  , offset: new BMap.Size(10, 90)};
        map.addControl(new BMap.NavigationControl(opts));

        var marker = new BMap.Marker(point);
        map.addOverlay(marker);

        var pointMenu=new BMap.ContextMenu();
        pointMenu.addItem(new BMap.MenuItem('选择该地点',function(point){
            $('#lat').html(point.lat);
            $('#lng').html(point.lng);
            marker.setPosition(point);
            map.panTo(point);
        }));
        map.addContextMenu(pointMenu);
        marker.enableDragging();
        marker.addEventListener("dragend", function(e){
            $('#lat').html(e.point.lat);
            $('#lng').html(e.point.lng);
        });
    }

    function hideStoreMap() {
        $('#mapView').removeClass('map-show').addClass('map-hidden');
        $('#mapMask').removeClass('map-mask-show').addClass('map-mask-hidden');
    }

    function doUpdate() {
        if(confirm('确认更新门店地图坐标?')){
            document.getElementById("updateChannelInfoForm").action = "<c:url value='/admin/doStoreMapChangeDetail.html' />";
            document.getElementById("updateType").value = "0";
            document.getElementById("latitude").value = $('#lat').html();
            document.getElementById("longitude").value = $('#lng').html();
            document.getElementById("updateChannelInfoForm").submit();
        }
    }

    function doObsolete() {
        if(confirm('确认作废此次更新?')){
            document.getElementById("updateChannelInfoForm").action = "<c:url value='/admin/doStoreMapChangeDetail.html' />";
            document.getElementById("updateType").value = "1";
            document.getElementById("latitude").value = $('#lat').html();
            document.getElementById("longitude").value = $('#lng').html();
            document.getElementById("updateChannelInfoForm").submit();
        }
    }

    function submitCallbackSuccess(obj) {
        $('#mapView').attr('style', 'display:none;');
        window.location="<c:url value='/admin/storeMapList.html' />";
    }
</script>
